<template>
  <div style="height: 100%" class="base-tree-outer">
    <div class="tree-bar">
      <div class="top-btn">
        <Button size="small" @click="expandTree" title="展开">展开</Button>
      </div>
      <div class="top-btn">
        <Button size="small" @click="foldTree" title="收起">收起</Button>
      </div>
      <div style="flex-grow: 1"></div>
      <div v-if="editable && curNode.nodeType === 'root'">
        <Button size="small" type="success" @click="insertNode" title="添加">添加</Button>
      </div>
      <div v-if="editable && curNode.nodeType !== 'root'" class="top-btn">
        <Button size="small" type="error" @click="deleteNode" title="删除">删除</Button>
      </div>
      <div v-if="editable && curNode.nodeType !== 'root'">
        <Button size="small" type="success" @click="updateNode" title="编辑">编辑</Button>
      </div>
    </div>
    <div style class="tree-panel-inner">
      <Tree
        :data="treeData"
        :load-data="loadData"
        :render="renderContent"
        @on-select-change="selectNode"
        ref="tableTree"
      ></Tree>
    </div>
  </div>
</template>

<script>
export default {
  name: 'BaseTree',
  data() {
    return {
      treeData: [
        {
          title: '',
          expand: true,
          selected: true,
          nodeIcon: 'md-filing',
          nodeType: 'root',
          fontSize: '18px',
          nodeId: 'root',
          children: [],
        },
      ],

      curNode: {
        nodeType: 'root',
      },
    };
  },
  props: {
    value: {
      type: Array,
    },
    loadData: {
      type: Function,
    },
    editable: {
      type: Boolean,
      default: true,
    },
  },
  watch: {
    value: {
      deep: true,
      handler: function (params) {
        this.treeData = params;
      },
    },
  },
  methods: {
    expandTree() {
      this.foldNode(this.treeData[0], true);
    },
    foldTree() {
      this.foldNode(this.treeData[0], false);
    },
    foldNode(pNode, type) {
      if (pNode.children.length > 0) {
        pNode.expand = type;
      }
      pNode.children &&
        pNode.children.forEach(item => {
          this.foldNode(item, type);
        });
    },
    selectNode(chooseList) {
      if (chooseList.length === 0) {
        return;
      }
      this.curNode = chooseList[0];
      this.$emit('on-select-node', this.curNode);
    },
    insertNode() {
      this.$emit('on-insert-node', this.curNode);
    },
    updateNode() {
      this.$emit('on-update-node', this.curNode);
    },
    deleteNode() {
      this.$emit('on-delete-node', this.curNode);
    },
    handleSelect(param) {
      this.$refs.tableTree.handleSelect(param);
    },
    renderContent(h, { data }) {
      return h(
        'span',
        {
          style: {
            display: 'inline-block',
          },
        },
        [
          h(
            'span',
            {
              attrs: {
                title: data.description,
              },
              class: ['ivu-tree-title', data.selected ? 'ivu-tree-title-selected' : ''],
              on: {
                click: () => {
                  this.$refs.tableTree.handleSelect(data.nodeKey);
                },
              },
            },
            [
              h('Icon', {
                props: {
                  type: data.nodeIcon,
                },
                style: {
                  marginRight: '4px',
                  fontSize: data.fontSize || '18px',
                },
              }),
              h('span', data.title),
            ]
          ),
        ]
      );
    },
  },
  mounted() {
    setTimeout(() => {
      // this.$emit('on-select-node', this.treeData[0]);
    });
  },
};
</script>

<style scoped>
.base-tree-outer {
  height: 100%;
}

.tree-bar {
  display: flex;
  height: 32px;
  line-height: 36px;
  background-color: #ffffff;
  padding: 0 16px;
}

.top-btn {
  /* width: 40px; */
  margin-right: 4px;
}

/* ==== */

.tree-panel-inner {
  background-color: #ffffff;
  overflow-y: auto;
  padding-top: 1px;
  height: calc(100% - 32px);
}

.tree-panel-inner /deep/ .ivu-tree ul {
  font-size: 14px;
}

.tree-panel-inner /deep/ .node-is-null {
  color: #bbbbbb;
}

.tree-panel-inner /deep/ .node-is-required {
  color: #ff9900;
}
</style>
